<template>
	<view class="content" :style="{height:height+'px'}">
		<view class="icon">
			<view class="iconfont" >&#xe601;</view>
			<view class="iconfont icon-zhibo">
				
			</view>
		</view>
		<!-- 顶部切换按钮 -->
		<view class="hrader-btn">
			<view class="btn" v-for="(item,index) in headerBtnList" :key="index">{{item}}</view>
			<switch checked color="green" style="transform:scale(0.7)"/>
		</view>
		<!-- 右边按钮 -->
		<view class="right-box">
			<view class="userimg">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F19%2F20210519212438_ced7e.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673257915&t=165a9f646b4a28082520c3c3bb46b890" mode="aspectFill"></image>
				<view class="iconfont icon-jiahao2fill">
					
				</view>
			</view>
			<view class="iconfont icon-aixin1" ></view>
			<view class="iconfont icon-shoucang1" ></view>
			<view class="iconfont icon-fenxiang" ></view>
			<view class="iconfont icon-duanxin" ></view>
			<view class="iconfont icon-weixin" ></view>
		</view>
		<!-- 视频盒子 -->
		<view class="video-box">
			<swiper class="swiper"  vertical="true" @change="swiperchange" @animationfinish="animationfinishfun">
				<swiper-item  v-for="(item,index) in videoList" :key="index">
					<!-- 每一个视频 -->
						<video @play="play" @touchmove="touchmove"  @timeupdate="timeUpdate"  @click="changeVideoStatus(item,index)"  :id="item._id" object-fit="" :enable-play-gesture="true" :show-progress="false" :show-fullscreen-btn="false" :show-center-play-btn="false" :show-play-btn="false"  :controls="false" class="video" :src="item.src" :autoplay="index==0" loop="true" show-fullscreen-btn :title="item.username"></video>
						<view class="controls">
							<view class="bar" @touchmove="touchmove" @touchend="touchend">
								<progress ref="pro" @touchmove="touchmove" activeColor="#00ff00" :percent="currentT/dur*100" />
								<view @touchstart="handletouchstart" class="btn" :style="{left:  per + '%'}"></view>
							</view>
							<!-- <text>{{ Math.floor( dur-currentT ) }}</text> -->
							<text>{{ minute + ":" + second }}</text>
						</view>
						<!-- 个人信息 -->
						<view class="userinfo">
							<view class="name">{{item.username}}</view>
							<view class="education">本科</view>
							<view class="iconfont icon-biaoqian">&nbsp;{{item.msg}}</view>
							<view class="iconfont icon-31dingwei">&nbsp;长沙市</view>
						</view>
				</swiper-item>
				
			</swiper>
			
			<text v-show="videoList.length && videoList[currentIndex].state=='pause'" class="icon-bofang iconfont"></text>
		</view>
	</view>
</template>

<script setup>
// import {} from ""
//导入封装好的请求函数
import {video_resources} from '../../api/index.js'
import { ref,onMounted,nextTick,computed } from "vue";
import { onReady } from '@dcloudio/uni-app'
var videoList= ref([]); //定义一个数组用来存储时评资源
var headerBtnList= ref(['人才','雇主','合伙人','推荐','关注']);
var currentIndex = ref(0);
var currentT = ref(0);
var dur = ref(0);
var pro = ref(null);
var muted = ref(true);
var height = ref(0);
var addZero = (num)=>{
	return num < 10 ? '0'+num : num + '';
}
var per =  computed(()=>{
	return currentT.value / dur.value * 100;
})
var minute =  computed(()=>{
	return addZero (parseInt( (dur.value-currentT.value)/60 ));
})
var second =  computed(()=>{
	return addZero ( parseInt( (dur.value-currentT.value)%60 ));
})

// #ifdef MP
onReady(()=>{
	video_resources({info:'get_video'}).then((res)=>{
		videoList.value=res.data.data;
		
		// #ifdef MP
		//获取系统信息
		uni.getSystemInfo({
		  success:  (res)=> {
			  console.log(res.windowHeight);
			// 获取可使用窗口宽度
			let clientHeight = res.windowHeight;
			// 获取可使用窗口高度
			let clientWidth = res.windowWidth;
			// 算出比例
			let ratio = 750 / clientWidth;
			// 算出高度(单位rpx)
			// let height = clientHeight * ratio;
			// 设置高度
			height.value = clientHeight;
		  }
		});
		
		// #endif
		videoList.value[currentIndex.value].state = 'play';
		nextTick(()=>{
			//获取第一个视频的总时长
			uni.getVideoInfo({
				src:videoList.value[0].src,
				success:(res)=>{
					dur.value = res.duration;
					videoList.value[currentIndex.value].state = 'play';
					console.log(videoList.value[currentIndex.value].state);
				}
			})

			//console.log('sdfsdf')
			//var videoContext = uni.createVideoContext(videoList.value[0]._id);
			//videoContext.play();
		})
	})
})

// #endif
onMounted(()=>{ //发送请求获取视频资源
	video_resources({info:'get_video'}).then((res)=>{
		videoList.value=res.data.data;
		console.log(res.data.data);
		
		// #ifdef MP
		//获取系统信息
		uni.getSystemInfo({
		  success:  (res)=> {
			  console.log(res.windowHeight);
			// 获取可使用窗口宽度
			let clientHeight = res.windowHeight;
			// 获取可使用窗口高度
			let clientWidth = res.windowWidth;
			// 算出比例
			let ratio = 750 / clientWidth;
			// 算出高度(单位rpx)
			// let height = clientHeight * ratio;
			// 设置高度
			height.value = clientHeight;
		  }
		});
		
		// #endif
		videoList.value[currentIndex.value].state = 'play';
		nextTick(()=>{
			//获取第一个视频的总时长
			uni.getVideoInfo({
				src:videoList.value[0].src,
				success:(res)=>{
					dur.value = res.duration;
					videoList.value[currentIndex.value].state = 'play';
					console.log(videoList.value[currentIndex.value].state);
				}
			})
			
			
			
			//console.log('sdfsdf')
			//var videoContext = uni.createVideoContext(videoList.value[0]._id);
			//videoContext.play();
		})
	})
});

//视频开始播放
var play = ()=>{
	// muted.value = false;
}

//点击视频，暂停、播放
var changeVideoStatus = (item,index)=>{
	console.log(item,index)
	var videoContext = uni.createVideoContext(item._id);
	if( videoList.value[index].state == 'pause' ){
		console.log('play',index)
		videoContext.play();
		videoList.value[index].state = 'play'
	}else{
		console.log('pause',index)
		videoContext.pause();
		videoList.value[index].state = 'pause'
	}
}
//滑动视频，播放下一个
var swiperchange = (e)=>{
	var {current} = e.detail;
	currentIndex.value = current;
	//只让当前轮播项对应的视频播放
	videoList.value.forEach((item,index)=>{
		var videoContext = uni.createVideoContext(item._id);
		if( index == current ){
			videoContext.play();
			videoList.value[current].state = 'play'
			console.log(videoList.value[current].state)
		}else{
			videoContext.pause();
			videoList.value[index].state = 'pause'
			console.log(videoList.value[index].state)
		}
	})
}
//播放进度发生改变时执行
var timeUpdate = (e)=>{
	var {currentTime, duration} = e.detail 
	currentT.value = parseInt(currentTime);
	dur.value = parseInt(duration);
}

//触摸开始
// #ifdef H5
var handletouchstart = (e)=>{
	document.ontouchmove = touchmove;
}
// #endif

var touchmove = (ee)=>{
	console.log(ee.touches,pro)
	//if(  ee.touches[0].clientX >= 0 &&  ee.touches[0].clientX <= pro.value[0].$el.offsetWidth ){
	if(  ee.touches[0].clientX >= 0 &&  ee.touches[0].clientX <= 300 ){
		//currentT.value = parseInt( (ee.touches[0].clientX-15) * dur.value / pro.value[0].$el.offsetWidth);
		currentT.value = parseInt( (ee.touches[0].clientX-15) * dur.value / 300);
		
		console.log('currentT',currentT.value);
		
		
		var videoContext = uni.createVideoContext(videoList.value[currentIndex.value]._id);
		videoContext.seek(currentT.value);
		// videoContext.play();
		videoList.value[currentIndex.value].state = 'play';
		
		// document.body.onclick = ()=>{
		// 	videoContext.play();
		// }
		// document.body.click();
		// videoList.value[currentIndex.value].state = 'play';
	}
}

var touchend = ()=>{
	var videoContext = uni.createVideoContext(videoList.value[currentIndex.value]._id);
	videoContext.play();
}
</script>

<style scoped lang="scss">
	
	page{
		height: 100%;
		background: black;
		display: flex;
		flex-direction: column;
	}
	.content{
		height: 2000rpx;
		flex:1;
		width: 100%;
		// height: 100%;
		position: relative;
		.icon{
			color: white;
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 80rpx;
			left: 50rpx;
			z-index: 9999;
			display: flex;
			.iconfont{
				font-size: 30px;
				margin-right: 40rpx;
			}
		}
		.right-box{
			width: 100rpx;
			position: absolute;
			top: 350rpx;
			right: 40rpx;
			z-index: 9999;
			.userimg{
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 40rpx;
				position: relative;
				left: 5rpx;
				view{
					width: 25rpx;
					height: 25rpx;
					background: white;
					color: red;
					position: absolute;
					border-radius: 50%;
					top: 65rpx;
					left: 25rpx;
					font-size: 14px;
				}
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.iconfont{
				color: white;
				font-size: 30px;
				margin-bottom: 40rpx;
				text-align: center;
			}
		}
		
		.hrader-btn{
			position: absolute;
			top: 160rpx;
			z-index: 999;
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			// margin: 40rpx 0;
			align-items: center;
			.btn{
				width: 25%;
				color: white;
			}
		}
		.video-box{
			width: 100%;
			height: 100%;
			// height: 1000rpx;
			position: relative;
			.icon-bofang{
				position: absolute;
				left: 50%;
				top:50%;
				transform: translate(-50%,-50%);
				color: white;
				font-size: 50px;
			}
			.swiper{
				width: 100%;
				height: 100%;
				swiper-item{
					position: relative;
					
				}
				.video{
				width: 100%;
				height: 100%;
				}
				.controls{
					display: flex;
					align-items: center;
					width: 100%;
					position: absolute;
					bottom: 80rpx;
					padding: 0rpx 30rpx;
					z-index: 9999;
					margin-right: 20rpx;
					.bar{
				
						position: relative;
						
						.btn{
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background-color: white;
							cursor: pointer;
						}
					}
					progress{
						width: 600rpx;
					}
					text{
						width: 100rpx;
						text-align: center;
						color: white;
					}
				}
			}
			.userinfo{
				position: absolute;
				bottom: 150rpx;
				left: 50rpx;
				color: white;
			}
		}
	}
	
	
	
	
</style>
